<template>
  <div class="m-content">
      <p class="u-nav">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
      </p>


      <div class="u-container">
          <div class="u-search">
            <el-row :gutter="30">
              <el-col :span="6"><div class="grid-content bg-purple"><el-input v-model="uid" placeholder="请输入商户ID"></el-input></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple"><el-input v-model="mobile" placeholder="请输入手机号"></el-input></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple"><el-input v-model="uname" placeholder="请输入商户名称"></el-input></div></el-col>
            </el-row>



            <el-row :gutter="30" style="margin-top: 15px">
              <el-col :span="12"><div class="grid-content bg-purple">
                <el-date-picker
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="date_pick"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>

              </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple" style="text-align: right">
                  <el-button type="primary" @click="search()" icon="el-icon-search">搜索</el-button>
                </div>
              </el-col>

            </el-row>


          </div>




          <div class="u-table"  v-loading="is_loading">
            <el-table
              :data="tableData"
              :default-sort = "{prop: 'uid', order: 'descending'}"
              show-header
              stripe
              style="width: 100%">

              <el-table-column
                label="商户ID"
                prop="uid">
              </el-table-column>

              <el-table-column
                label="用户名"
                prop="uname">
              </el-table-column>

              <el-table-column
                label="手机号"
                prop="mobile">
              </el-table-column>

              <el-table-column
                label="创建时间"
                prop="create_time">
              </el-table-column>

              <el-table-column
                fixed="right"
                label="操作"
                width="260">
                <template slot-scope="scope">
                  <el-button type="text" size="small">修改</el-button>
                </template>
              </el-table-column>
            </el-table>

          </div>

        <div class="u-pages">
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="15"
              layout="prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>


      </div>

  </div>
</template>

<script>

  export default {
    name: 'm-content',
    data:function(){
      return {
        is_loading:true,
        baseurl:this.$moment.config.baseurl,
        uid: '',
        mobile: '',
        uname:'',
        date_pick:'',
        tableData: [],
        currentPage:1,
        total:0,

      };
    },
    methods: {
      //提交查询
      search:function () {

        var data={};

        if(this.uid!=''){
          data.uid=this.uid;
        }

        if(this.mobile!=''){
          data.mobile=this.mobile;
        }

        if(this.uname!=''){
          data.uname=this.uname;
        }



        if(this.date_pick!=''&&this.date_pick!=null){

           var datetime=this.date_pick;
           data.start_time=datetime[0];
           data.end_time=datetime[1];
        }

        data.page=this.currentPage;

        this.get_userlist(data);

      },

      get_userlist:function(postdata) {

        this.$http.post(this.baseurl+'user/index/lists' ,postdata,{credentials : true,emulateJSON:true}).then(function(res){

           if(res.status==200){

               if(res.body.code==200){

                   var retdata=res.body.data;


                   this.total=res.body.data.count;
                   console.log(this.data)
                   this.tableData=res.body.data.list;
                   this.is_loading=false;

               }else{
                 this.$message({
                   message: res.body.msg,
                   type: 'error'
                 });
               }

            }else {

              this.$message({
                message: '网络请求错误，请刷新后重试！',
                type: 'error'
              });
          }


        });

      },

      handleCurrentChange:function(val){
        this.is_loading=false;
        var data={};
        data.page=val;
        this.get_userlist(data);
      },
      pushurl:function (param,basurl) {
        this.$router.push({ path: './'+basurl+'/'+param})
      }

    },
    created: function () {
      var data={};
      data.page=1;
      this.get_userlist(data);
    },

  }
</script>


<style>

  .m-content{
    margin: 15px;

  }
  .el-select{
    width: 100%;
  }
  .u-container{
    margin-top: 20px;
    padding: 15px;
    background: #fff;
    box-shadow: 0 0 20px 0 rgba(0,0,0,.05);
  }
  .u-table{
    margin-top: 30px;
  }

  .u-search{
    padding-bottom: 30px;
    border-bottom: 1px solid #f9f9f9;
  }
  .u-pages{
    margin-top: 20px;
    text-align: right;
  }
  .el-range-editor.el-input__inner{
    width: 100%;
  }

</style>
